﻿<%@ Page Title="Kirkwood School For Children - Schedule" Language="C#" MasterPageFile="~/MasterPages/Site.Master" AutoEventWireup="true" CodeBehind="Schedule.aspx.cs" Inherits="Daycare.Scheduling" %>

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <style type="text/css">
        a:hover {
            text-decoration: none;
            cursor: pointer;
        }

        .hidden {
            visibility: hidden;
        }

        .checkboxlist_nowrap label {
            display: inline;
            margin-left: 5px;
        }

        .tab {
            background-color: #1D1D1D;
            color: #DDDDDD;
            padding: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin-right: 1px;
        }

        .inActiveTab {
            background-color: #eeeeee;
            padding: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            margin-right: 1px;
            color: white;
        }

            .inactiveTab:hover {
                cursor: default;
                color: white;
            }

        .tab:hover {
            color: white;
        }

        .selected {
            background-color: #3D3D3D;
            color: white;
            padding-top: 10px;
            padding-right: 5px;
            padding-left: 5px;
            padding-bottom: 5px;
            font-size: larger;
        }

        ::-webkit-scrollbar {
            width: 9px;
            height: 9px;
        }

        ::-webkit-scrollbar-button:start:decrement, #doc ::-webkit-scrollbar-button:end:increment {
            display: block;
            height: 0;
            background-color: transparent;
        }

        ::-webkit-scrollbar-track-piece {
            background-color: #FAFAFA;
            -webkit-border-radius: 0;
            -webkit-border-bottom-right-radius: 8px;
            -webkit-border-bottom-left-radius: 8px;
        }

        ::-webkit-scrollbar-thumb:vertical {
            height: 50px;
            background-color: #999;
            -webkit-border-radius: 8px;
        }

        ::-webkit-scrollbar-thumb:horizontal {
            width: 50px;
            background-color: #999;
            -webkit-border-radius: 8px;
        }


        .modalBackground {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }

        .modalPopup {
            -moz-border-radius: 15px;
            border-radius: 15px;
            background-color: #FFFFFF;
            padding-left: 10px;
            padding-right: 10px;
        }

        .checkBoxListDiv {
            overflow: auto;
            background-color: whitesmoke;
        }

        .divBackgroundColorless {
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        .divBackground {
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: #3D3D3D;
            padding: 10px;
        }

        .divBackground-understaffed {
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: red;
            padding: 5px;
            color: white;
        }

        .divBackground-lightgrey {
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-color: #eeeeee;
            padding: 10px;
        }

        .divBackgroundUnfulfilledSchedule {
            background-color: #cccccc;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        .divBackgroundFulfilledSchedule {
            background-color: #000000;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        .divBackground-scheduleSoloDaily {
            margin-left: 20px;
        }

        .divBackground-scheduleSoloWeekly {
            margin-left: 60px;
        }


        .clean-gray {
            background-color: #eeeeee;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
            background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
            background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
            background-image: linear-gradient(top, #eeeeee, #cccccc);
            border: 1px solid #ccc;
            border-bottom: 1px solid #bbb;
            border-radius: 3px;
            color: #333;
            font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
            padding: 8px;
            text-align: center;
            text-shadow: 0 1px 0 #eee;
            width: 150px;
        }

            .clean-gray:hover {
                background-color: #dddddd;
                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
                background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
                background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
                background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
                background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
                background-image: linear-gradient(top, #dddddd, #bbbbbb);
                border: 1px solid #bbb;
                border-bottom: 1px solid #999;
                cursor: pointer;
                text-shadow: 0 1px 0 #ddd;
            }

            .clean-gray:active {
                border: 1px solid #aaa;
                border-bottom: 1px solid #888;
                -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
                box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
            }

        .ellipsisText {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .customselect {
            -moz-appearance: none;
            -webkit-appearance: none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#childSearch").keyup(function () {
                var value = $(this).val();
                var exp = new RegExp('^' + value, 'i');

                $('.childList .child').each(function () {
                    var isMatch = exp.test($('.name', this).text());
                    $(this).toggle(isMatch);
                });
            });

            $("#staffSearch").keyup(function () {
                var value = $(this).val();
                var exp = new RegExp('^' + value, 'i');

                $('.staffList .staff').each(function () {
                    var isMatch = exp.test($('.name', this).text());
                    $(this).toggle(isMatch);
                });
            });

            //$("#ddlScheduleViews").change(function () {
            //    $(".weekly").toggle();
            //    $(".daily").toggle();
            //});
        });
    </script>
    <div style="padding-bottom: 0px; margin-bottom: 0px">
        <div id="scheduleSection" style="display: inline-block; width: 100%; height: 800px; vertical-align: top">
            <div id="tabs" style="margin-left: 10px;">
                <asp:LinkButton runat="server" ID="lbChildrenTab" Text="Children" ValidationGroup="Tab" CssClass="tab selected" Width="80px" Style="text-align: center" OnClick="ToggleStaffChild_Click" ClientIDMode="Static" /><asp:LinkButton ID="lbStaffTab" runat="server" Text="Staff" ValidationGroup="Tab" CssClass="tab" Width="80px" Style="text-align: center" OnClick="ToggleStaffChild_Click" ClientIDMode="Static" />
                <div style="display: inline-block; text-align: center; width: 420px; margin-bottom: -5px; padding-top: 10px; vertical-align: bottom; margin-left: 130px" class="divBackground">
                    <span style="font-style: italic; font-weight: bold; color: white">Legend</span>
                    <div style="width: 110px; height: 20px; padding: 0px; display: inline-block; margin-right: 1px; margin-left: 10px" class="divBackgroundUnfulfilledSchedule">
                        <span style="color: black">Scheduled</span>
                    </div>
                    <div style="width: 110px; height: 20px; padding: 0px; display: inline-block; margin-right: 1px; margin-left: 0px" class="divBackgroundFulfilledSchedule">
                        <span style="color: white">Attended</span>
                    </div>
                    <div style="width: 110px; height: 20px; background-color: red; padding: 0px; display: inline-block; margin-left: 0px" class="divBackgroundFulfilledSchedule">
                        <span style="color: white">Understaffed</span>
                    </div>
                </div>
                <div class="divBackground" style="width: 300px; display: inline-block; margin-bottom: -5px; padding-top: 2px; vertical-align: bottom; margin-left: 70px">
                    <asp:DropDownList runat="server" ID="ddlScheduleViews" AutoPostBack="true" Width="80px" Height="30px" Style="padding-bottom: 0px; margin-bottom: -5px;" ClientIDMode="Static" CssClass="customselect" OnSelectedIndexChanged="ddlScheduleViews_SelectedIndexChanged">
                        <asp:ListItem Text="Daily" Value="Daily" />
                        <asp:ListItem Text="Weekly" Value="Weekly" />
                    </asp:DropDownList>
                    <div style="vertical-align: bottom; display: inline-block; margin-left: 10px">
                        <asp:LinkButton runat="server" ID="lbPreviousDate" TabIndex="9" OnClick="lbDateChange_Click" ClientIDMode="Static"><img src="img/icons/leftArrow.png" height="16" width="16" /></asp:LinkButton>
                        <div style="margin-top: 7px; display: inline-block">
                            <asp:Label runat="server" ID="lblStartDate" Style="font-weight: bold; color: #FFFFFF;" Text="11/08/2013" />
                            <asp:Label runat="server" ID="lblEndDate" Style="font-weight: bold; color: #FFFFFF;" Text=" - 11/08/2013" />
                        </div>
                        <asp:LinkButton runat="server" ID="lbNextDate" TabIndex="9" OnClick="lbDateChange_Click" ClientIDMode="Static"><img src="img/icons/rightArrow.png" height="16" width="16"/></asp:LinkButton>
                    </div>
                </div>
            </div>
            <div id="scheduleBody" class="divBackground" style="padding-top: 5px; padding-bottom: 5px">
                <asp:Panel Style="height: 740px; overflow: auto;">
                    <div class="divBackground-lightgrey" style="border-bottom: 1px solid #3D3D3D; margin-bottom: 2px; height: 50px; padding-bottom: 0px; padding-top: 1px;">
                        <div style="width: 200px; display: inline-block; vertical-align: top; padding-top: 2px; margin-top: 10px">
                            <asp:Button runat="server" ID="bScheduleDaycare" CssClass="clean-gray" Text="Update the Schedule" CommandName="ScheduleChild" OnClick="bScheduleDaycare_Click" />
                        </div>
                        <asp:Panel runat="server" ID="pnlDailyHeader" ClientIDMode="Static" Style="display: inline-block; vertical-align: bottom;">
                            <asp:Panel runat="server" ID="pnlTimeBlockOne" Style="width: 110px; display: inline-block; margin-right: 20px">
                                <span style="font-size: small; font-weight: bold">07:30AM-08:30AM</span>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="pnlTimeBlockTwo" Style="width: 110px; display: inline-block; margin-right: 20px">
                                <span style="font-size: small; font-weight: bold">08:30AM-10:30AM</span>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="pnlTimeBlockThree" Style="width: 110px; display: inline-block; margin-right: 20px">
                                <span style="font-size: small; font-weight: bold">10:30AM-12:30PM</span>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="pnlTimeBlockFour" Style="width: 110px; display: inline-block; margin-right: 20px">
                                <span style="font-size: small; font-weight: bold">12:30PM-01:00PM</span>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="pnlTimeBlockFive" Style="width: 110px; display: inline-block; margin-right: 20px">
                                <span style="font-size: small; font-weight: bold">01:00PM-03:00PM</span>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="pnlTimeBlockSix" Style="width: 110px; display: inline-block; margin-right: 20px">
                                <span style="font-size: small; font-weight: bold">03:00PM-05:00PM</span>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="pnlTimeBlockSeven" Style="width: 110px; display: inline-block; padding-right: 0px">
                                <span style="font-size: small; font-weight: bold">05:00PM-05:30PM</span>
                            </asp:Panel>
                        </asp:Panel>
                        <asp:Panel runat="server" ID="pnlWeeklyHeader" ClientIDMode="Static" Style="display: inline-block; margin-right: 30px; text-align: center" Visible="false">
                            <asp:LinkButton runat="server" ID="lbMonday" Style="width: 110px; display: inline-block; margin-left: 50px; margin-right: 30px; padding-top: 5px; color: black;" CssClass="divBackgroundColorless" OnClick="WeeklyHeader_Click">
                                <span style="font-size: small; font-weight: bold">Monday</span><br />
                                <asp:Label runat="server" ID="lblMondayDate" ClientIDMode="Static" />
                            </asp:LinkButton>
                            <asp:LinkButton runat="server" ID="lbTuesday" Style="width: 110px; display: inline-block; margin-left: 30px; margin-right: 30px; color: black;" OnClick="WeeklyHeader_Click" CssClass="divBackgroundColorless" >
                                <span style="font-size: small; font-weight: bold">Tuesday</span><br />
                                <asp:Label runat="server" ID="lblTuesdayDate" ClientIDMode="Static" />
                            </asp:LinkButton>
                            <asp:LinkButton runat="server" ID="lbWednesday" Style="width: 110px; display: inline-block; margin-left: 30px; margin-right: 30px; color: black;" OnClick="WeeklyHeader_Click" CssClass="divBackgroundColorless" >
                                <span style="font-size: small; font-weight: bold">Wednesday</span><br />
                                <asp:Label runat="server" ID="lblWednesdayDate" ClientIDMode="Static" />
                            </asp:LinkButton>
                            <asp:LinkButton runat="server" ID="lbThursday" Style="width: 110px; display: inline-block; margin-left: 30px; margin-right: 30px; color: black; " OnClick="WeeklyHeader_Click" CssClass="divBackgroundColorless" >
                                <span style="font-size: small; font-weight: bold">Thursday</span><br />
                                <asp:Label runat="server" ID="lblThursdayDate" ClientIDMode="Static" />
                            </asp:LinkButton>
                            <asp:LinkButton runat="server" ID="lbFriday" Style="width: 110px; display: inline-block; margin-left: 30px; margin-right: 30px; color: black; " OnClick="WeeklyHeader_Click" CssClass="divBackgroundColorless" >
                                <span style="font-size: small; font-weight: bold">Friday</span><br />
                                <asp:Label runat="server" ID="lblFridayDate" ClientIDMode="Static" />
                            </asp:LinkButton>
                        </asp:Panel>
                    </div>
                    <asp:Panel runat="server" ID="pnlScheduleChildren">
                       <asp:Literal runat="server" ID="ltrChildren" />
                    </asp:Panel>
                    <asp:Panel runat="server" ID="pnlScheduleStaff" Visible="false">
                       <asp:Literal runat="server" ID="ltrStaff" />
                    </asp:Panel>
                </asp:Panel>
            </div>
        </div>
        <div id="peopleSelector" style="display: inline-block; width: 29%; padding: 0px; height: 835px; vertical-align: top; visibility: hidden" class="divBackground-lightgrey">
            <div style="margin-left: 20px; width: 310px">
                <div>
                    <div style="margin-top: 15px;">
                        <span style="font-weight: bold; font-size: large; margin-right: 30px">Children</span> <span style="font-size: smaller; font-style: italic">Filter</span>
                        <input type="text" style="width: 100px; vertical-align: top" id="childSearch" />
                        <br />
                        <hr style="width: 90%; border: 1px solid #3D3D3D; margin-top: 0px; padding-top: 0px" />
                    </div>
                    <div style="height: 310px; overflow-y: auto; overflow-x: hidden" class="childList">
                        <asp:LinkButton runat="server" CssClass="child" OnClick="Unnamed_Click">
                            <div class="clean-gray" style="width: 100px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 10px">
                                <img src="Uploads/Images/t_bob130259983181934626.png" /><br />
                                <span class="name">Greg Anderson</span>
                            </div>
                        </asp:LinkButton><div class="clean-gray child" style="width: 250px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            <img src="Uploads/Images/t_bob130259983181934626.png" />
                            <span class="name">Tom Jones</span>
                        </div>
                        <div class="clean-gray child" style="width: 250px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            <img src="Uploads/Images/t_bob130259983181934626.png" />
                            <span class="name">Bob Seever</span>
                        </div>
                        <div class="clean-gray child" style="width: 250px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            <img src="Uploads/Images/t_bob130259983181934626.png" />
                            <span class="name">Bobby Smith</span>
                        </div>
                    </div>
                </div>
                <hr style="width: 90%" />
                <div>
                    <div style="margin-top: 15px;">
                        <span style="font-weight: bold; font-size: large; margin-right: 60px">Staff</span> <span style="font-size: smaller; font-style: italic">Filter</span>
                        <input type="text" style="width: 100px; vertical-align: top" id="staffSearch" />
                        <br />
                        <hr style="width: 90%; border: 1px solid #3D3D3D; margin-top: 0px; padding-top: 0px" />
                    </div>
                    <div style="height: 310px; overflow-y: auto; overflow-x: hidden" class="staffList">
                        <div class="clean-gray staff" style="width: 250px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            <img src="Uploads/Images/t_bob130259983181934626.png" />
                            <span class="name">Angela Bronson</span>
                        </div>
                        <div class="clean-gray staff" style="width: 250px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            <img src="Uploads/Images/t_bob130259983181934626.png" />
                            <span class="name">Rafe Derier</span>
                        </div>
                        <div class="clean-gray staff" style="width: 250px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            <img src="Uploads/Images/t_bob130259983181934626.png" />
                            <span class="name">Grant Feelgooooooooooooooooooooooooooooooooooooooooooooooood</span>
                        </div>
                        <div class="clean-gray staff" style="width: 250px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                            <img src="Uploads/Images/t_bob130259983181934626.png" />
                            <span class="name">Lorraine Morraine</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <asp:Button runat="server" ID="bHiddenPopupSchedule" Style="display: none" Enabled="true" />
        <ajaxToolkit:ModalPopupExtender ID="mpeSchedule" runat="server" TargetControlID="bHiddenPopupSchedule" PopupControlID="pnlSchedulePopup" OkControlID="btnScheduleOk" CancelControlID="btnScheduleCancel" BackgroundCssClass="modalBackground" />
        <asp:Panel ID="pnlSchedulePopup" runat="server" CssClass="modalPopup" Style="display: none; background-color: #eeeeee" Width="300px">
            <div style="padding: 10px;">
                <h4>
                    <asp:Label runat="server" ID="lblAddUpdateFamilyDocument" Text="Schedule Daycare" /></h4>
                <div style="float: right">
                    <asp:Button ID="btnScheduleCancel" runat="server" Text="Cancel" Style="margin-bottom: 10px; margin-right: 15px" CssClass="clean-gray" />
                    <asp:Button ID="btnScheduleOk" runat="server" Text="OK" Style="margin-bottom: 10px" CssClass="clean-gray" />
                </div>
            </div>
        </asp:Panel>

        <asp:Button runat="server" ID="bHiddenPopupCheckin" Style="display: none" Enabled="true" />
        <ajaxToolkit:ModalPopupExtender ID="mpeCheckin" runat="server" TargetControlID="bHiddenPopupCheckin" PopupControlID="pnlCheckin" OkControlID="bCheckinOk" CancelControlID="bCheckinCancel" BackgroundCssClass="modalBackground" />
        <asp:Panel ID="pnlCheckin" runat="server" CssClass="modalPopup" Style="display: none; background-color: #eeeeee" Width="300px">
            <div style="padding: 10px;">
                <h4>
                    <asp:Label runat="server" ID="lblCheckinChild" Text="Check in Child" /></h4>
                <div style="float: right">
                    <asp:Button ID="bCheckinCancel" runat="server" Text="Cancel" Style="margin-bottom: 10px; margin-right: 15px" CssClass="clean-gray" />
                    <asp:Button ID="bCheckinOk" runat="server" Text="OK" Style="margin-bottom: 10px" CssClass="clean-gray" />
                </div>
            </div>
        </asp:Panel>
    </div>
    </div>
</asp:Content>
